class ContentList extends React.Component {
    constructor(props) {
        super(props);
        this.page = 1;
        this.state = {
            list: ''
        }
    }

    layuiInitComplete() {
        this.layer = layui.layer;
    }

    queryList(page) {
        let param = {};
        param.pageSize = 8;
        //保证通过之后还是在当前页
        if (page > 1 && this.state.list.length === 1) {
            param.page = page - 1;
        } else {
            param.page = page;
        }
        param.type_code = this.props.nodeInfo.resourceType.type_code;
        this.updateList(param);
    }

    updateList(param) {
        postJson('/cms/appResource/queryResourceList.x', $.param(param), function (data) {
            this.page = param.page;
            this.setState({
                list: data.data.list
            });
            if (param.page === 1) {
                layui.laypage({
                    cont: 'contentListPage'
                    , pages: Math.ceil(data.data.size / param.pageSize)
                    , jump: function (row, first) {
                        if (!first) {
                            param.page = row.curr;
                            this.updateList(param);
                        }
                    }.bind(this)
                });
            }
        }.bind(this))
    }

    tbody() {
        if (this.state.list) {
            return this.state.list.map(function (array) {
                return (<tr>
                    <td>
                        <div className="Center-Container"
                             style={{border: '1px solid #CDCDC1', width: '70px', height: '50px'}}>
                            <img className="Absolute-Center" style={{'max-height': '90%', 'max-width': '90%'}}
                                 onClick={() => this.props.showImage(array.icon_url)} src={array.icon_url}/>
                        </div>
                    </td>
                    <td>{array.title}</td>
                    <td>{array.description}</td>
                    <td>
                        <span style={{
                            'color':
                                array.isApproved === "N" ? 'red' :
                                    array.isApproved === "Y" ? '#00CC66' :
                                        'blue'
                        }}>{array.approvedState}</span>
                    </td>
                    <td>
                        {array.creator}
                    </td>
                    <td>
                        <button type="button"
                                className="permsRemove layui-btn layui-btn-small"
                                onClick={() => this.editResource(array)}>编&nbsp;辑
                        </button>
                        <button type="button"
                                className="permsRemove layui-btn layui-btn-small layui-btn-danger"
                                onClick={() => this.deleteResource(array.resource_id)}>删&nbsp;除
                        </button>
                    </td>
                </tr>)
            }.bind(this))
        }
    }

    editResource(resource) {
        this.props.tabChange('tab1', resource);
    }

    deleteResource(id) {
        layer.confirm('确定要删除？', {
            btn: ['确定', '取消']
        }, () => {
            postJson("/cms/appResource/deleteResource.x", $.param({
                'resource_id': id, 'isNotDeleteOss': false
            }), () => {
                this.queryList(this.page);
                layer.closeAll();
            });
        });
    }

    render() {
        return <div style={{'padding-bottom': '10px'}}>
            <table className="layui-table">
                <colgroup>
                    <col width="100"/>
                    <col width="200"/>
                    <col/>
                    <col/>
                    <col width="100"/>
                    <col width="150"/>
                </colgroup>
                <thead>
                <tr>
                    <th>图片</th>
                    <th>标题</th>
                    <th>描述</th>
                    <th>状态</th>
                    <th>创建人</th>
                    <th>操作</th>
                </tr>
                </thead>

                <tbody>
                {this.tbody()}
                </tbody>
            </table>
            < div style={{'float': 'right', 'margin-right': '1px'}} id="contentListPage"/>
        </div>
    }
}
